<template>
	<div>
		<view class="arrivalNavigation" :style="{'top':navHeight+'px'}" v-if="ShowHidden">
			<!-- <view class="d4"></view> -->
			<image class="triangle" src="https://oss.jxhecong.com/v2/image/sanjiaoxing_shang.png"></image>
			<view class="sideNavigation">
				<nav>
					<view>
						<navigator v-if="telPhone?true:false">
							<li class="nav-item" @click.stop="tel">
								<text class="tel">{{telPhone}}</text>
							</li>
						</navigator>
					</view>
				</nav>
			</view>
		</view>
	</div>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	export default {
		props: ['ShowHidden', 'telPhone', 'serviceAddress'],
		data() {
			return {
				navHeight:0
			}
		},
		mounted() {
			this.navHeight=globalData.titleHeight;
			console.log(this.navHeight)
		},
		methods: {
			tel() {
				this.$emit('makePhoneCall', {})
				uni.makePhoneCall({
					phoneNumber: this.telPhone
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	//从这里开始是弹出框的样式  不需要搜索框的 前面样式都不用加
	/* #ifdef APP-PLUS || APP-PLUS-NVUE */
	.arrivalNavigation {
		width: 250rpx;
		position: fixed;
		right: 10rpx;
		top:170rpx;
		z-index: 999999999999;

		.sideNavigation {
			width: 250rpx;
			background-color: #202020;
			color: #eee;
			border-radius: 10rpx;
			position: relative;
			margin-top:-20rpx;
			z-index: 999999999999;
			.nav-item {
				height: 85rpx;
				text-align: center;
				font-size: 24rpx;
			}

			.liBottomBorder {
				border: 0.1rpx solid #373737;
			}

		}
	}
	.triangle {
		position: relative;
		margin-top: -30rpx;
		left: 100rpx;
		width: 50rpx;
		height: 50rpx;
	}
	/* #endif */
	/* #ifdef MP */
	.arrivalNavigation {
		width: 250rpx;
		position: fixed;
		left: 10rpx;
		top: 170rpx;
		z-index: 999999999;
	
		.sideNavigation {
			width: 250rpx;
			background-color: #202020;
			color: #eee;
			border-radius: 10rpx;
			position: relative;
			margin-top:-20rpx;
			.nav-item {
				height: 85rpx;
				text-align: center;
				font-size: 24rpx;
			}
	
			.liBottomBorder {
				border: 0.1rpx solid #373737;
			}
	
		}
	}
	.triangle {
		position: relative;
		margin-top: -30rpx;
		left: 15rpx;
		width: 50rpx;
		height: 50rpx;
	}
	/* #endif */

	.nav-item {
		position: relative;
		left: 0rpx;
		right: 0rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.tel {
		color: #fff;
		font-size: 28rpx;
		text-align: center;
	}
</style>
